class Slider {
    constructor(id, cycle = 3000) {
        this.cycle = cycle;
        this.container = document.getElementById(id);
        this.items = this.container.querySelectorAll(".slider-list__item,.slider-list__item--selected");

        // 向前翻
        const previous = this.container.querySelector(".slider-list__previous");
        if (previous) {
            previous.addEventListener('click', evt => {
                this.stop();
                this.sliderPrevious();
                this.start();
                evt.preventDefault();
            })
        }
        // 向后翻
        const next = this.container.querySelector(".slider-list__next");
        if (next) {
            next.addEventListener('click', evt => {
                this.stop();
                this.sliderNext();
                this.start();
                evt.preventDefault();
            })
        }
        // 控制点
        const controller = this.container.querySelector(".slider-list__control");
        if (controller) {
            const buttons = controller.querySelectorAll('.slider-list__control-buttons,.slider-list__control-buttons--selected');
            controller.addEventListener("mouseover", evt => {
                const idx = Array.from(buttons).indexOf(evt.target);
                if (idx >= 0) {
                    this.sliderTo(idx);
                    this.stop();
                }
            })
            controller.addEventListener('mouseout', evt => {
                this.start();
            })
            this.container.addEventListener('slide', evt => {
                const idx = evt.detail.index;
                const selected = controller.querySelector('.slider-list__control-buttons--selected');
                if (selected) {
                    selected.className = "slider-list__control-buttons";
                }
                buttons[idx].className = "slider-list__control-buttons--selected";
            })
        }
    }
    getSelectedItem() {
        const select = this.container.querySelector(".slider-list__item--selected");
        return select;
    }
    getSelectedItemIndex() {
        return Array.from(this.items).indexOf(this.getSelectedItem());
    }
    sliderTo(index) {
        const select = this.getSelectedItem();
        if (select) {
            select.className = "slider-list__item";
        }
        const item = this.items[index];
        if (item) {
            this.items[index].className = "slider-list__item--selected";
        }
        const detail = { index: index }
        const event = new CustomEvent("slide", { bubbles: true, detail })
        this.container.dispatchEvent(event);
    }
    sliderNext() {
        const index = this.getSelectedItemIndex();
        const nextIndex = (index + 1) % this.items.length;
        this.sliderTo(nextIndex);
    }
    sliderPrevious() {
        const index = this.getSelectedItemIndex();
        const previousIndex = (index + this.items.length - 1) % this.items.length;
        this.sliderTo(previousIndex);
    }
    start() {
        this.stop();
        this._timer = setInterval(() => {
            this.sliderNext();
        }, this.cycle)
    }
    stop() {
        clearInterval(this._timer);
    }
}
const slider = new Slider("my-slider", 2000);
slider.start();